import React, { Component } from 'react';
import { TabNavigator, TabBarBottom } from 'react-navigation';
import { Icon } from 'native-base';
import STRING from '../const_string_zh_CN';

//pages
import TabMessage from './MessageStackNavigator';
import TabClass from './CourseStackNavigator';
import TabMe from './MeStackNavigator';
// import TabDiscovery from './DiscoveryStackNavigator';

const MessageTabOptions = {
    // activeTintColor :'#28AB91',
    // activeBackgroundColor  :'#28AB91',
    tabBarLabel: STRING.message_page_name,
    tabBarIcon: ({ tintColor }) => (
        <Icon name='chatbubbles' style={{color:tintColor}}/>
    ),
    headerTitle: STRING.message_page_title,
    headerTitleStyle: {
        // color: '#28AB91',
        color: 'black',
        textAlign: 'center',
        alignSelf: 'center',
    },
};

const ClassTabOptions = {
    // activeTintColor :'#28AB91',
    // activeBackgroundColor  :'#28AB91',
    tabBarLabel: STRING.class_page_name,
    tabBarIcon: ({ tintColor }) => (
        <Icon name='book' style={{color:tintColor}}/>
    ),
    headerTitle: STRING.class_page_title,
    headerTitleStyle: {
        color: 'black',
        // color: 'black',
        textAlign: 'center',
        alignSelf: 'center',
    },
};
/* 
const DiscoveryTabOptions = {
    tabBarLabel: STRING.discovery_page_name,
    tabBarIcon: ({ tintColor }) => (
        <Icon name='bookmark' style={{color:tintColor}}/>
    ),
    headerTitle: STRING.discovery_page_title,
    headerTitleStyle: {
        color: 'black',
        textAlign: 'center',
        alignSelf: 'center',
    },
}; */

const MeTabOptions = {
    // activeTintColor :'#28AB91',
    // activeBackgroundColor  :'#28AB91',
    tabBarLabel: STRING.me_page_name,
    tabBarIcon: ({ tintColor }) => (
        <Icon name='contact' style={{color:tintColor}}/>
    ),
    headerTitle: STRING.me_page_title,
    headerTitleStyle: {
        color: 'black',
        textAlign: 'center',
        alignSelf: 'center',
    },
};


const MOOCTabNavigator = TabNavigator({
    Message: { screen: TabMessage, navigationOptions: MessageTabOptions },
    Class: { screen: TabClass, navigationOptions: ClassTabOptions },
    // Discovery: { screen: TabDiscovery, navigationOptions: DiscoveryTabOptions },
    Me: { screen: TabMe, navigationOptions: MeTabOptions },
}, {
        tabBarComponent: TabBarBottom,//or TabBarTop
        tabBarPosition: 'bottom', //or top
        swipeEnabled: false,
        animationEnabled: false,
        showIcon: false,
        initialRouteName: 'Class', 
        tintColor:'#28AB91'
    });

export default MOOCTabNavigator;
